<template>
	<view class="info-bg">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<text class="nav-title">预约详情</text>
			<image src="/static/wwc/left.png" class="back-icon" mode="aspectFill" />
		</view>
		<!-- 白色卡片：二维码和核销码 -->
		<view class="card">
			<view class="verify-row">
				<text class="verify-label">核销码：</text>
				<text class="verify-code">WE343235V</text>
			</view>
			<image src="/static/wwc/qrcode.png" class="qrcode" mode="aspectFill" />
		</view>
		<!-- 维修信息 -->
		<view class="section">
			<view class="section-title">维修信息</view>
			<view class="info-list">
				<view>
				<view class="info-row"><text class="info-label">维修单号：</text><text class="info-value">3535252</text></view>
				<view class="info-row"><text class="info-label">维修状态：</text><text class="info-value blue">进行中</text></view>
				<view class="info-row"><text class="info-label">车主姓名：</text><text class="info-value">张</text></view>
				<view class="info-row"><text class="info-label">联系方式：</text><text class="info-value">1993829282</text></view>
				<view class="info-row"><text class="info-label">维修方式：</text><text class="info-value">上门取车</text></view>
				<view class="info-row"><text class="info-label">取车位置：</text><text class="info-value">山阳区32号</text></view>
				<view class="info-row"><text class="info-label">预约日期：</text><text class="info-value">2022/11/10 11:00</text></view>
				<view class="info-row"><text class="info-label">提交日期：</text><text class="info-value">2022/11/08 12:34</text></view>
				</view>
			</view>
		</view>
		<!-- 车辆信息 -->
		<view class="section" style="margin: 20rpx 24rpx 0 24rpx;">
			<view class="section-title">车辆信息</view>
			<view class="info-list">
				<view class="info-row"><text class="info-label">车辆类型：</text><text class="info-value">大客车</text></view>
				<view class="info-row"><text class="info-label">车牌号：</text><text class="info-value">豫J45323</text></view>
				<view class="info-row">
					<text class="info-label">整车照片：</text>
				</view>
				<view class="photo-list">
					<image src="/static/wwc/car2.png" class="car-photo" mode="aspectFill" />
				</view>
				<view class="info-row">
					<text class="info-label">维修部位照片：</text>
				</view>
				<view class="photo-list">
					<image src="/static/wwc/car2.png" class="car-photo" mode="aspectFill" />
					<image src="/static/wwc/car2.png" class="car-photo" mode="aspectFill" />
					<image src="/static/wwc/car2.png" class="car-photo" mode="aspectFill" />
				</view>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="bottom-btn-area">
			<button class="btn-cancel">取消预约</button>
		</view>
	</view>
</template>

<script setup>
	// 可根据需要添加跳转、取消等逻辑
</script>

<style scoped>
.info-bg {
	min-height: 100vh;
	background: #f7f7f7;
	position: relative;
	padding-bottom: 120rpx;
}
.nav-bar {
	height: 400rpx;
	background: linear-gradient(180deg, #258aff 0%, #1677ff 100%);
	display: flex;
	justify-content: center;
	padding-top: 40rpx;
	position: relative;
}
.nav-title {
	color: #fff;
	font-size: 40rpx;
	font-weight: bold;
}
.back-icon {
	width: 60rpx;
	height: 75rpx;
	position: absolute;
	left: 15rpx;
	top: 20rpx;
}
.card {
	position: absolute;
	left: 24rpx;
	right: 24rpx;
	top: 140rpx;
	background: #fff;
	border-radius: 24rpx;
	/* box-shadow: 0 8rpx 32rpx #e6e6e6; */
	padding: 40rpx 24rpx 32rpx 24rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	z-index: 2;
}
.verify-row {
	display: flex;
	align-items: center;
	margin-bottom: 24rpx;
}
.verify-label {
	font-size: 30rpx;
	color: #333;
	font-weight: bold;
}
.verify-code {
	font-size: 30rpx;
	color: #1677ff;
	font-weight: bold;
	margin-left: 12rpx;
}
.qrcode {
	width: 180rpx;
	height: 180rpx;
	margin-bottom: 8rpx;
}
.section {
	background: #fff;
	margin: 40rpx 24rpx 0 24rpx;
	border-radius: 20rpx;
	padding: 32rpx 24rpx 16rpx 24rpx;
	box-shadow: 0 2rpx 8rpx #e6e6e6;
}
.section-title {
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 24rpx;
	color: #222;
}
.info-list {
	width: 100%;
}
.info-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 28rpx;
	margin-bottom: 16rpx;
}
.info-label {
	color: #666;
	width: 180rpx;
	flex-shrink: 0;
}
.info-value {
	color: #222;
}
.info-value.blue {
	color: #1677ff;
	font-weight: bold;
}
.photo-list {
	display: flex;
	flex-direction: row;
	gap: 24rpx;
	margin-bottom: 16rpx;
	margin-top: 8rpx;
}
.car-photo {
	width: 140rpx;
	height: 100rpx;
	border-radius: 12rpx;
	background: #f7f7f7;
	object-fit: cover;
}
.bottom-btn-area {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background: transparent;
	display: flex;
	justify-content: center;
	padding: 24rpx 0 32rpx 0;
	z-index: 10;
}
.btn-cancel {
	width: 80%;
	background: #1677ff;
	color: #fff;
	font-size: 32rpx;
	border-radius: 60rpx;
	height: 88rpx;
	line-height: 88rpx;
	text-align: center;
	font-weight: bold;
}
</style>
